<template>
  <view>
    <!-- 1.1 收货地址  开始  -->
    <button v-if="!address" @click="handleClick">获取我的收货地址</button>
    <view v-else class="address">
      <view class="detail-address">
        {{ detailAddress }}
      </view>
      <view class="detail-user">
        <view class="userName">{{ address.userName }}</view>
        <view class="telNumber">{{ address.telNumber }}</view>
      </view>
    </view>
    <!-- 1.1 收货地址  结束  -->
    <!-- 2.1 已选商品 开始 -->
    <view class="goods-wrap">
      <view class="goods-title">已选商品</view>
      <view class="goods-list">
        <view class="goods" v-for="item in cartList" :key="item.goods_id">
          <!-- 2 图片 -->
          <view class="goods-img">
            <u-image
              width="80%"
              mode="widthFix"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
          <!-- 3 名称 -->
          <view class="goods-info">
            <!-- 商品名称 -->
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <!-- 商品编辑栏 -->
            <view class="goods-tool">
              <view class="goods-price ">￥{{ item.goods_price }}</view>
              <view class="goods-count">
                <view class="goods-num"> X {{ item.count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 2.1 已选商品 结束 -->

    <!-- 3.1 统计 状态栏 开始 -->
    <!-- 全选 数据状态栏 -->
    <view class="status-tool">
      <!-- 总价 -->
      <view class="price">
        合计: <text>￥{{ allPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="settle" @click="goPay">去支付({{ allCount }})</view>
    </view>
    <!-- 3.1 统计 状态栏 结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: false,
    };
  },
  computed: {
    // 用户的详细地址
    detailAddress() {
      if (!this.address) return null;
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    // 用户待支付的商品-   已经勾选了的商品   过滤 filter
    cartList() {
      return this.$store.state.cartList.filter((goods) => goods.checked);
    },
    // 购买的数量
    allCount() {
      return this.$store.getters.allCount;
    },
    // 支付总金额
    allPrice() {
      return this.$store.getters.allPrice;
    },
  },
  methods: {
    async handleClick() {
      const [err, res] = await uni.chooseAddress();
      this.address = res;
    },

    async goPay() {
      // 1 先判断有没有收货地址
      if (!this.address) {
        // 没有
        uni.showToast({
          title: "您还没有选择收货地址",
          icon: "none",
        });
        return;
      }

      // 2  支付流程 重要重要重要！！！
      // 2.1 获取用户个人信息 getUserProfile
      const [
        err1,
        { encryptedData, rawData, iv, signature },
      ] = await uni.getUserProfile({ desc: "用于完善会员资料" });

      //  还要发送 一个 code 值 登录凭据  给后台  （code 腾讯那边的验证 5分钟之内有效）
      const [err2, { code }] = await uni.login();
      // 2.2 发送请求 获取token
      //  是 该死的错误
      // 偶尔出现 第一次请求 返回没有token
      // 点击第二次就可以了！！！

      const res = await this.$u.post("/users/wxlogin", {
        encryptedData,
        rawData,
        iv,
        signature,
        code,
      });
      // 获取token
      const { token } = res.message;

      // 3 创建订单
      // 3.1 获取token 已经搞定
      // 3.2 获取 创建订单的参数
      const orderParams = {
        // 是	string	订单总价格
        order_price: this.allPrice,
        // 是	string	收货地址
        consignee_addr: this.detailAddress,
        // 是	Array	订单数组
        goods: this.cartList.map((goods) => ({
          goods_id: goods.goods_id,
          goods_number: goods.count,
          goods_price: goods.goods_price,
        })),
      };

      // 3.3 发送post请求 来完成订单的创建
      const res2 = await this.$u.post("/my/orders/create", orderParams, {
        Authorization: token,
      });

      // 3.4 获取支付参数 pay
      const res3 = await this.$u.post(
        "/my/orders/req_unifiedorder",
        { order_number: res2.message.order_number },
        {
          Authorization: token,
        }
      );
      const { pay } = res3.message;

      // 4 把参数发送微信 调起微信小程序的api
      uni.requestPayment(pay);
    },
  },
};
</script>

<style lang="scss">
.address {
  padding: 15rpx;
  .detail-address {
    font-size: 30rpx;
    font-weight: 700;
  }
  .detail-user {
    display: flex;
    justify-content: space-between;
  }
}
.goods {
  display: flex;
  padding: 10rpx;
  border-bottom: 1rpx solid #eee;

  .goods-img {
    flex: 2;
    padding: 10rpx;
  }

  .goods-info {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-tool {
      display: flex;
      justify-content: space-between;
      .goods-price {
        font-size: 30rpx;
        color: $themeColor;
      }
      .goods-count {
        width: 150rpx;
        justify-content: space-between;
        display: flex;
      }
    }
  }
}
.status-tool {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  height: 80rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  justify-content: space-between;
  .price {
    flex: 1;
    padding: 0 30rpx;
    text {
      font-size: 30rpx;
      color: $themeColor;
    }
  }

  .settle {
    width: 170rpx;
    height: 50rpx;
    font-size: 24rpx;
    border-radius: 25rpx;
    background-color: $themeColor;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
